#@layout()
#define title()
Add a Word
#end

#define head_extend()
<link href="/words/add.css" id="theme" rel="stylesheet">
#end


#define bread_crumb()
<div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
    <ol class="breadcrumb">
        <li><a href="/">All Words</a></li>
        <li class="active">
            Add a Word
        </li>
    </ol>
</div>
#end



#define main()
<div class="container-fluid">
<div class="row">
    <div class="col-md-4 col-xs-12">
        <div class="white-box">
            <div class="user-bg">
                <img width="100%" alt="user" src="/common/images/default.png">
                <p class="text-center">Picture to help learn the word</p>
            </div>
        </div>
    </div>
    <div class="col-md-8 col-xs-12">
        <div class="white-box">
            <form class="form-horizontal form-material">
                <div class="form-group">
                    <label class="col-md-12">Word</label>
                    <div class="col-md-12">
                        <input type="text" placeholder="Input your word here..." class="form-control form-control-line">
                     </div>
                </div>
                <div class="form-group">
                    <label class="col-md-12">Meaning</label>
                    <div class="col-md-12">
                        <input type="text" placeholder="中文解释中文翻译" class="form-control form-control-line">
                      </div>
                </div>
                <div class="form-group">
                    <label class="col-md-12">Picture</label>
                    <div class="col-md-12">
                        <input type="text" placeholder="Pic Url" class="form-control form-control-line">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-12">sentences</label>
                    <div class="col-md-12">
                        <textarea rows="5" placeholder="sentences of the word.... Spliting them by pressing ENTER if there are several ... " class="form-control form-control-line"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-12">Category</label>
                    <div class="col-sm-12">
                        <select class="form-control form-control-line">
                            <option>Car</option>
                            <option>IT</option>
                            <option>Daily</option>
                            <option>Feeling</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <button class="btn btn-custom">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/index/index.js"></script>
#end
